<template>
    <div class="wrapper">
        <div class="wrapperTop">
            <terminalSearch :text="numAll" @listen="listenToChildren" @reset="reset"  showSerchBind="sateActive"></terminalSearch>
        </div>
        <div class="wrapperCenter">
            <div class="content">
                <van-checkbox-group v-model="checked">
                    <empty v-if="!posList.length"></empty>
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getFindPageList">
                        <div class="posItem" v-for="item in posList" :key="item.TUSN">
                            <van-checkbox :name="item.TUSN" checked-color="#66d6ff" :disabled="!childData.agencySource">
                                <div class="posInfo">
                                    <div class="left">
                                        <img class="posImg" v-if="item.USE_TYPE == 'DQPOS'" src="@/assets/posImg/dq.jpg" alt="" />
                                        <img class="posImg" v-else src="@/assets/posImg/ct.jpg" alt="" />
                                    </div>
                                    <div class="right" style="color: #000000">
                                        <div class="bind">
                                            <div style="font-weight: bold;display: flex;align-items: center">
                                                <text style="margin-right: 10px">{{ item.USE_TYPE_NAME }}-{{ item.COMPONENT_TYPE }}</text>
                                                <img v-if="item.AGENCY_SOURCE === 'LS'" style="height: 20px" src="@/assets/LS.png" />
                                                <img v-if="item.AGENCY_SOURCE === 'HLB'"  style="height: 20px" src="@/assets/hlb.png" />
                                                <img v-if="item.AGENCY_SOURCE === 'QB'" style="height: 20px" src="@/assets/QB.png" />
                                                <img v-if="item.AGENCY_SOURCE === 'UEN'"  style="height: 20px" src="@/assets/HK.png" />
                                            </div>                                        </div>
                                        <div>机构：{{ item.AGENCY_SOURCE_NAME }}</div>
                                        <div>TUSN：{{ item.TUSN }} <img src="@/assets/copy.png" mode="widthFix"
                                                style="width: 12px; margin-left: 5px; vertical-align: baseline;" alt="" @click.stop="copy(item.TUSN)"/></div>
                                        <div>活动：{{ item.ACT_CODE }}</div>
                                        <div v-if="item.AGENCY_SOURCE !== 'HX' && item.POS_SN">SN：{{ item.POS_SN }}</div>
                                    </div>
                                </div>
                            </van-checkbox>
                        </div>
                    </van-list>
                </van-checkbox-group>
            </div>
        </div>
        <div class="wrapperBottom" v-if="posList.length">
            <div class="left">
                <van-checkbox :disabled="!childData.agencySource" @change="checkedAllClick" v-model="checkedAll" checked-color="#66d6ff">全选</van-checkbox>
            </div>
            <div  class="right" @click="goBank" :disabled="!childData.agencySource" >已选择{{ checked.length }}台</div>
        </div>
    </div>
</template>

<script>
import { findByPosDeposit, findByPosDepositCount } from '@/api/posManagement'
import store from '@/store'
import { showToast } from 'vant'
export default defineComponent({
    name: 'sateActive',
    setup() {
        const router = useRouter()
        const state = reactive({
            childData: {},
            loading: false,
            finished: false,
            currentPage: 1,
            checkedAll: false,
            checked: [],
            numAll: 0,
            posList: []
        })
        const getFindPageList = () => {
            findByPosDeposit({
                currentPage: state.currentPage,
                ...state.childData
            }).then(res => {
                if (res.object.length < 10) {
                    state.finished = true
                    state.loading = false
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }
                state.posList = state.posList.concat(res.object)
            })
        }
        const reset = val => {
            state.checked = []
            state.checkedAll = false
        }

        const listenToChildren = val => {
            state.childData = val
            state.posList = []
            state.finished = true
            state.loading = true
            state.currentPage = 1
            getFindPageList()
        }

        const checkedAllClick = e => {
            state.checked = []
            if (e) {
                state.posList.forEach(item => {
                    state.checked.push(item.TUSN)
                })
            }
        }
        const goBank = () => {
            if (!state.checked.length) {
                showToast('请选择终端机具')
                return
            }
            store.dispatch('data/GetposTusn', state.checked)
            store.dispatch('data/GetposTusnType', 'db')
            router.push({
                path: '/activeSelcet',
                query:{
                    agencySource: state.childData.agencySource
                }
            })
        }
        // 文本拷贝
        const copy = (str) =>{
            let domInput = document.createElement('input')
            domInput.value = str
            document.body.appendChild(domInput) // 添加input节点
            domInput.select() // 选择对象;
            document.execCommand('Copy') // 执行浏览器复制命令
            showToast('复制成功')
            domInput.remove()
        }
        return {
            ...toRefs(state),
            checkedAllClick,
            reset,
            listenToChildren,
            getFindPageList,
            goBank,
            copy
        }
    }
})
</script>
<style scoped lang="scss">
.wrapper {
    display: flex;
    height: 100vh;
    flex-direction: column;

    .wrapperTop {}

    .wrapperCenter {
        flex: 1;
        overflow: scroll;

        .content {
            padding: 0 10px;

            .posItem {
                background: #ffffff;
                opacity: 1;
                border-radius: 6px;
                padding: 10px;
                margin-top: 10px;
                display: flex;
                align-items: center;

                .posInfo {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    font-family: 'Avenir', Helvetica, Arial, sans-serif;
                    .left {
                        img {
                            width: 38px;
                        }
                    }

                    .right {
                        padding-left: 10px;
                        flex: 1;

                        .bind {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .button {
                                padding: 0 10px;
                                border: 1px solid #66d6ff;
                                opacity: 1;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }
        }
    }

    .wrapperBottom {
        padding: 14px;
        background: #ffffff;
        opacity: 1;
        border-radius: 0px;
        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
        }

        .right {
            width: 80px;
            height: 26px;
            background: #66d6ff;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #ffffff;
            border-radius: 5px;
        }
    }
}</style>
<style>.van-checkbox {
    width: 100%;
}

.van-checkbox__label {
    flex: 1;
}
.van-button--disabled{
    opacity: 0.7 !important;
}
</style>
